<template>
    <div class="update-container">
        <div class="update-icon-wrapper" @mouseenter="showDropdown = true" @mouseleave="showDropdown = false">
            <svg
                t="1762932280354"
                class="update-icon"
                viewBox="0 0 1025 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3312"
                width="35"
                height="35"
            >
                <path
                    d="M671.924149 670.990647m-353.009353 0a353.009353 353.009353 0 1 0 706.018706 0 353.009353 353.009353 0 1 0-706.018706 0Z"
                    fill="#5C97FF"
                    opacity=".2"
                    p-id="3313"
                ></path>
                <path
                    d="M652.508634 52.694765m-17.650467 0a17.650468 17.650468 0 1 0 35.300935 0 17.650468 17.650468 0 1 0-35.300935 0Z"
                    fill="#5C97FF"
                    p-id="3314"
                ></path>
                <path
                    d="M842.251162 197.958114m-17.650468 0a17.650468 17.650468 0 1 0 35.300935 0 17.650468 17.650468 0 1 0-35.300935 0Z"
                    fill="#5C97FF"
                    p-id="3315"
                ></path>
                <path
                    d="M697.676181 73.698822l-0.953125 1.8886a17.526914 17.526914 0 0 0 7.360245 22.451395 442.779631 442.779631 0 0 1 78.721085 60.01159 17.526914 17.526914 0 0 0 23.351569 1.341435l1.553241-1.359086a17.385711 17.385711 0 0 0-0.176504-25.151916 478.610081 478.610081 0 0 0-85.67537-65.412633 17.438662 17.438662 0 0 0-24.181141 6.230615z"
                    fill="#5C97FF"
                    p-id="3316"
                ></path>
                <path
                    d="M854.818294 185.602787a123.835681 123.835681 0 0 1-26.369798 23.581024 440.961633 440.961633 0 1 1-185.612318-141.503799 123.676827 123.676827 0 0 1 15.797169-31.770842 477.127442 477.127442 0 1 0 196.184947 149.693617z"
                    fill="#5C97FF"
                    p-id="3317"
                ></path>
                <path
                    d="M536.986323 390.930677c37.189535 17.491613-9.019389 117.269707-16.767944 144.486728-8.013312 28.240748-27.234672 141.662653 50.286183 72.243364 0 0 38.831029-27.658283-16.767945 36.130507s-125.706631 84.086828-134.143554 36.112857c-6.318867-36.165808 26.864012-167.326433 33.535889-216.730092 2.171008-16.132527-8.948787-4.53617-16.750294 0s-66.101001 37.065982-64.53011 21.392367a43.137743 43.137743 0 0 1 14.243928-21.392367s113.704313-89.893832 150.893847-72.243364z"
                    fill="#5C97FF"
                    p-id="3318"
                ></path>
                <path
                    d="M495.419472 300.330826m-52.951403 0a52.951403 52.951403 0 1 0 105.902806 0 52.951403 52.951403 0 1 0-105.902806 0Z"
                    fill="#FFB266"
                    p-id="3319"
                ></path>
            </svg>

            <!-- 下拉菜单 -->
            <transition name="dropdown">
                <div v-if="showDropdown" class="update-dropdown">
                    <div class="update-dropdown-header">
                        <span class="update-title">最近更新</span>
                    </div>
                    <div class="update-list">
                        <div v-for="(item, index) in lastTwoUpdates" :key="index" class="update-item">
                            <div class="update-item-header">
                                <span class="update-version">{{ item.updateVersion }}</span>
                                <span class="update-time">{{ item.updateTime }}</span>
                            </div>
                            <div class="update-item-title">{{ item.updateTitle }}</div>
                            <div class="update-item-content">
                                <template v-if="Array.isArray(item.updateConent)">
                                    <div v-for="(content, contentIndex) in item.updateConent" :key="contentIndex" class="content-item">
                                        ⭐ - {{ content }}
                                    </div>
                                </template>
                                <template v-else> ⭐ - {{ item.updateConent }} </template>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

const showDropdown = ref(false);

const info = [
    {
        updateVersion: '0.3.1',
        updateTime: '2025/11/12',
        updateTitle: '系统修复',
        updateConent: '修复了系统用户-角色-权限之间的关联问题',
    },
    {
        updateVersion: '0.3.2',
        updateTime: '2025/11/12',
        updateTitle: '更新功能',
        updateConent: ['供应商采购展示栏新增了持久化功能。可以记住上次的勾选条件。', '新增了系统版本更新介绍功能。'],
    },
    {
        updateVersion: '0.3.3',
        updateTime: '2025/11/13',
        updateTitle: '新增功能',
        updateConent: ['在系统配置中，自定义选择是否展示主页和工具导航'],
    },
    {
        updateVersion: '0.3.4',
        updateTime: '2025/11/13',
        updateTitle: '新增功能',
        updateConent: ['供应商采购中加入了到货量和金额的展示（采购单据项）'],
    },
    {
        updateVersion: '0.3.5',
        updateTime: '2025/11/14',
        updateTitle: '新增功能',
        updateConent: ['新增了库存纸的销毁功能'],
    },
    {
        updateVersion: '0.3.6',
        updateTime: '2025/11/14',
        updateTitle: '新增功能',
        updateConent: ['新增了订单常规统计功能'],
    }

];

// 获取最后5个更新内容然后反转数组
const lastTwoUpdates = computed(() => {
    return info.slice(-5).reverse();
});
</script>

<style scoped>
.update-container {
    position: relative;
    display: flex;
    align-items: center;
}

.update-icon-wrapper {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.update-icon {
    transition: transform 0.3s ease;
}

.update-icon-wrapper:hover .update-icon {
    transform: scale(1.05);
}

.update-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: white;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 300px;
    z-index: 1000;
    overflow: hidden;
}

.update-dropdown-header {
    padding: 12px 16px;
    background: #f5f7fa;
    border-bottom: 1px solid #e4e7ed;
}

.update-title {
    font-weight: 600;
    color: #303133;
    font-size: 14px;
}

.update-list {
    max-height: 200px;
    overflow-y: auto;
}

.update-item {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.update-item:last-child {
    border-bottom: none;
}

.update-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.update-version {
    font-size: 12px;
    color: #409eff;
    font-weight: 500;
    background: #ecf5ff;
    padding: 2px 6px;
    border-radius: 4px;
}

.update-time {
    font-size: 12px;
    color: #909399;
}

.update-item-title {
    font-size: 14px;
    font-weight: 500;
    color: #303133;
    margin-bottom: 4px;
}

.update-item-content {
    font-size: 12px;
    color: #606266;
    line-height: 1.4;
}

/* 下拉动画 */
.dropdown-enter-active,
.dropdown-leave-active {
    transition: all 0.3s ease;
}

.dropdown-enter-from,
.dropdown-leave-to {
    opacity: 0;
    transform: translateY(-10px);
}
</style>
